<template>
    <div id="foodInfo">
         <mt-header fixed :title="foodData.foodName">
            <span slot="left">
                <mt-button icon="back" @click.native="goB">返回</mt-button>
            </span>
        </mt-header>
        <div class="read-content">
            <mt-swipe>
                <mt-swipe-item v-for="(item, index) in foodData.foodImgs" :key="index">
                    <img :src="item">
                </mt-swipe-item>
            </mt-swipe>
        </div>
        <div class="shop-price-ad">
            <div class="shop-msg">
                <!-- 销售额 -->
                <span>月销售63份</span>
                <span>好评率99%</span>
            </div>
            <p class="shop-price">￥{{foodData.foodPrice}}</p>
            <div class="shop-option">
                <p>-</p>
                <p>{{foodData.foodCount}}</p>
                <p>+</p>
            </div>                                           
        </div>

        <div class="food-commit">
            <div class="food-info-title">
                <p :class="{active: !isCommit}" @click="() =>{ isCommit = false}">店家描述</p>
                <p :class="{active: isCommit}" @click="() =>{ isCommit = true}">评论</p>
            </div>
        </div>
        <!-- 描述 -->
        <div v-show="!isCommit" class="commit">
            m
        </div>

        <!-- 用户评论 -->
        <div class="content" v-show="isCommit">
            p
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
    data(){
        return {
            isCommit: false,
            //这里直接获取store里面的值 刷新不变
            // food: this.$store.state.goodMenu,
            foodData: this.$store.state.currentFood//直接获取当前食材就可以了 
            // foodData: this.$store.state.goodMenu[this.$store.state.foodTypeIndex]
            //     .data[this.$store.state.foodCurrentIndex]
        }
    },
    computed:{
        ...mapState([
            'goodMenu',
            'foodTypeIndex',
            'foodCurrentIndex'
        ])
    },
    created(){
       console.log(this.foodData)
    },

    inject:['goB'],
}
</script>
<style lang="less" scoped>
#foodInfo{
    // background-color: #49CB5F;
    height: 100%;
    overflow: hidden;
    //图片轮播
    .read-content{
        height: 210px;
        margin-top: 40px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .shop-price-ad{
        display: flex;
        justify-content: space-around;
        height: 30px;
        line-height: 30px;
        padding: 20px 0 10px 0;
        border-bottom: 2px solid #fedb89; 
        background-color: #49CB5F;
        //好评率 以及月销售
        .shop-msg{
            flex: 3;
            display: flex;
            justify-content: space-around;
            font-size: 20px;
            color: #fedb89;
        }
        //价格
        .shop-price{
            flex: 1;
            font-size: 25px;
            text-align: right;
            color: #fedb89;
        }
        //订单增加减
        .shop-option{
            flex: 1;
            display: flex;
            margin-left: 20px;
            padding-top: 2px;
            p{
                width: 25px;
                height: 25px;
                font-size: 20px;
                line-height: 25px;
                text-align: center;
                margin: 0 5px;
                background-color: #fedb89;
                color: #49CB5F;
                border-radius: 50%;
            }
        }
    }

    //描述或者评价切换
    .food-commit{
        .food-info-title{
            display: flex;
            justify-content: space-around;
            border-bottom: 2px solid #fedb89; 
            background-color: #49CB5F;
            > p{
                flex: 1;
                text-align: center;
                font-size: 25px;
                padding: 5px 0;
                color: #fedb89;
            }
            .active{
                background-color: #c3d08b;
                color: #49CB5F;
            }
        }
    }
}
</style>


